<template>
  <el-dialog
    :visible.sync="visible"
    style="max-height: 800px; overflow-y: auto"
    :close-on-click-modal="false"
    append-to-body
    @close="handleClose"
  >
    <div class="body">
      <div class="container" id="printContent">
        <div class="item_1-1">入库过磅单</div>
        <div class="item_1-2">
          <div id="qrcode-meitan"></div>
        </div>
        <div class="item_2-1">出厂日期:</div>
        <div class="item_2-2">2025/1/20</div>
        <div class="item_2-3">第3次打印</div>
        <div class="item_2-4">单据号:</div>
        <div class="item_2-5">4501112411</div>
        <div class="item_3-1">收货单位</div>
        <div class="item_3-2">齐齐哈尔龙江阜丰生物科技有限公司</div>
        <div class="item_3-3">车号</div>
        <div class="item_3-4">京A00000</div>
        <div class="item_4-1">发货单位</div>
        <div class="item_4-2">呼和浩特内蒙阜丰生物科技有限公司</div>
        <div class="item_x-1">货物名称</div>
        <div class="item_x-2">福瑞 谷氨酸钠</div>
        <div class="item_x-3">规格</div>
        <div class="item_x-4">1*25kg</div>
        <div class="item_x-5">毛重</div>
        <div class="item_x-6">23450kg</div>
        <div class="item_x-1">原始单号</div>
        <div class="item_x-2">4501112411</div>
        <div class="item_x-3">部门</div>
        <div class="item_x-4">信息部</div>
        <div class="item_x-5">皮重</div>
        <div class="item_x-6">23450kg</div>
        <div class="item_x-1">原始重量</div>
        <div class="item_x-2">23450kg</div>
        <div class="item_x-3">预置扣重</div>
        <div class="item_x-4">12340kg</div>
        <div class="item_x-5">净重</div>
        <div class="item_x-6">23450kg</div>
        <div class="item_x-1">净重大写</div>
        <div class="item_x-2">二三四五零千克</div>
        <div class="item_x-3">原发日期</div>
        <div class="item_x-4">2025/1/20</div>
        <div class="item_x-5">扣杂质</div>
        <div class="item_x-6">2340kg</div>
        <div class="item_x-1">SAP单号</div>
        <div class="item_x-2">4501112411</div>
        <div class="item_x-3">原发矿</div>
        <div class="item_xx-1">呼伦贝尔东北阜丰生物科技有限公司</div>
        <div class="item_x-1">承运商</div>
        <div class="item_x-2">111111</div>
        <div class="item_x-3">SAP备注</div>
        <div class="item_xx-1">1111111111111111</div>
        <div class="item_11-1">
          白：存根，蓝：结算，红：装卸费，黄：运费，绿：统计
        </div>
        <div class="item_11-2">2号磅称毛重,8号磅称皮重</div>
        <img src="../../../assets/logo/dongbeiZ.png" class="img" />
      </div>
    </div>
    <el-button type="primary" class="common-button" v-print="printOptions"
      >打印html</el-button
    >
  </el-dialog>
</template>
<script>
import QRCode from "qrcodejs2";

export default {
  components: {
    QRCode,
  },
  props: {
    formData: {},
  },
  data() {
    return {
      printOptions: {
        id: "printContent",
        popTitle: "打印文档",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        beforeOpenCallback() {
          console.log("打印窗口即将打开");
        },
        openCallback() {
          console.log("打印窗口已打开");
        },
        closeCallback() {
          console.log("打印窗口已关闭");
        },
      },
      form: {},
      visible: false,
    };
  },
  methods: {
    handleClose() {
      console.log("磅单 退出");
      this.visible = false;
    },
    code() {
      this.qrcode(80, 80, "DR2412030318", "canvas");
    },

    /**
     * @description 生成二维码
     * @param  {number} qWidth  宽度
     * @param  {number} qHeight  高度
     * @param  {string} qText  二维码内容（跳转连接）
     * @param  {string} qRender 渲染方式（有两种方式 table和canvas，默认是canvas）
     */
    qrcode(qWidth, qHeight, qText, qRender) {
      const container = document.getElementById("qrcode-meitan");
      container.innerHTML = "";
      console.log(container);

      // 生成二维码
      const code = new QRCode(container, {
        text: qText,
        width: qWidth,
        height: qHeight,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
    // onWindowLoad() {
    //   console.log("二维码")
    //   this.$refs.qrcode.innerHTML = "";
    //   this.qrcode(124, 124, this.formData.czbh, "canvas");
    // },
    select() {
      console.log("meitan");
      this.visible = true;
      this.$nextTick(() => {
        this.code();
      });
    },
  },
};
</script>

  <style scoped>
* {
  box-sizing: border-box;
}
.img {
  width: 140px;
  height: 80px;
  position: absolute;
  top: 202px;
  right: 0px;
  z-index: 999;
}

.wechat-group img {
  max-width: 220px;
  height: auto;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  width: 100%;
}

.container {
  z-index: 1;
  margin-top: 28px;
  margin-right: 28px;
  margin-bottom: 28px;
  margin-left: 28px;
  display: grid;
  height: 279px;
  width: 735px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  color: black;
  position: relative;
}
.container > * {
  display: grid;
  justify-items: center;
  align-items: center;
  margin-left: -1px;
  margin-top: -1px;
}
.item_1-1 {
  grid-column-start: 1;
  grid-column-end: 11;
  font-size: 12px;
  text-align: center;
  font-weight: 800;
}
.item_1-2 {
  display: grid;
  grid-column-start: 11;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 5;
  border: 1px solid black;
  /* justify-items: center;
  align-items: center; */
}
.item_2-1 {
  grid-column-start: 1;
  grid-column-end: 2;
  font-size: 12px;
  text-align: left;
}
.item_2-2 {
  grid-column-start: 2;
  grid-column-end: 5;
  font-size: 12px;
  text-align: left;
}
.item_2-3 {
  grid-column-start: 5;
  grid-column-end: 8;
  font-size: 12px;
}
.item_2-4 {
  grid-column-start: 8;
  grid-column-end: 9;
  font-size: 12px;
  text-align: left;
}
.item_2-5 {
  grid-column-start: 9;
  grid-column-end: 11;
  font-size: 12px;
  text-align: left;
}
.item_3-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  font-size: 12px;
  text-align: center;
  border: 1px solid black;
}
.item_3-2 {
  grid-column-start: 3;
  grid-column-end: 8;
  font-size: 12px;
  text-align: center;
  border: 1px solid black;
}
.item_3-3 {
  grid-column-start: 8;
  grid-column-end: 9;
  font-size: 12px;
  text-align: center;
  border: 1px solid black;
}
.item_3-4 {
  grid-column-start: 9;
  grid-column-end: 11;
  font-size: 12px;
  text-align: center;
  border: 1px solid black;
}
.item_4-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  font-size: 12px;
  text-align: center;
  border: 1px solid black;
}
.item_4-2 {
  grid-column-start: 3;
  grid-column-end: 11;
  font-size: 12px;
  text-align: center;
  border: 1px solid black;
}
.item_x-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  font-size: 12px;
  text-align: center;
  border: 1px solid black;
}
.item_x-2 {
  grid-column-start: 3;
  grid-column-end: 7;
  font-size: 12px;
  text-align: center;
  border: 1px solid black;
}
.item_x-3 {
  grid-column-start: 7;
  grid-column-end: 8;
  font-size: 12px;
  text-align: center;
  border: 1px solid black;
}
.item_x-4 {
  grid-column-start: 8;
  grid-column-end: 10;
  font-size: 12px;
  text-align: center;
  border: 1px solid black;
}
.item_x-5 {
  grid-column-start: 10;
  grid-column-end: 11;
  font-size: 12px;
  text-align: center;
  border: 1px solid black;
}
.item_x-6 {
  grid-column-start: 11;
  grid-column-end: 13;
  font-size: 12px;
  text-align: center;
  border: 1px solid black;
}
.item_xx-1 {
  grid-column-start: 8;
  grid-column-end: 13;
  font-size: 12px;
  text-align: center;
  border: 1px solid black;
}
.item_11-1 {
  grid-column-start: 1;
  grid-column-end: 7;
  font-size: 12px;
}
.item_11-2 {
  grid-column-start: 7;
  grid-column-end: 13;
  font-size: 12px;
}
.body {
  height: 400px;
  width: 800px;
  background-color: aliceblue;
}
</style>
  